<template>
    <div class='container'>
        <div class="title">
            单位详情
        </div>
        <div class="div_box">
            <h2>{{ datav.orgarr.orgName }}</h2>
            <div>
                {{ datav.orgarr.province }}{{ datav.orgarr.city }}{{ datav.orgarr.area }}{{ datav.orgarr.street }}
                <!-- {{ datav.orgarr.address }} -->
            </div>
            <!-- <div v-if="datav.orgarr.username!='' &&  datav.orgarr.mobile!=''" ><span style="color: #8EA4E9;">责任人：</span>{{ datav.orgarr.username }} {{ datav.orgarr.mobile }}</div> -->

            <div class="div_item">
                <div>建筑物数量：<span>{{ datav.buildingsSum }}</span> </div>
            </div>

        </div>
        <el-image :src="xiangqing"></el-image>
    </div>
</template>

<script>
import { mapState } from "vuex";

export default {
    components: {
    },
    data() {
        return {
            xiangqing: require("@assets/images/datav/xiangqing.png"),
        }
    },
    computed: {
        ...mapState(["datav"]),
    },
    watch: {},
    methods: {

    },
    created() {
        // console.log(this.datav);
    },
    mounted() {

    }
}
</script>

<style lang='less' scoped>
.fontSize (@px, @attr: font-size) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.lineHeight (@px, @attr: line-height) {
    @vh: (@px / 1080) * 100;
    @{attr}:~'@{vh}vh';
}

.width (@px, @attr: width) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.height (@px, @attr: height) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.top (@px, @attr: top) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.left (@px, @attr: left) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.right (@px, @attr: right) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.marginTop (@px, @attr: margin-top) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.marginBottom (@px, @attr: margin-bottom) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.marginLeft (@px, @attr: margin-left) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.marginRight (@px, @attr: margin-right) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.container {
    height: 100%;
    width: 100%;
    display: inline-block;
    .fontSize(16);
    position: relative;

    .title {
        .height(43);
        width: 58%;
        margin: 0 auto;
        .fontSize(16);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("../../../../assets/images/datav/head.png") no-repeat;
        background-size: 100% 100%;
        font-weight: 600
    }

    .div_box {
        padding-left: 6%;
        padding-right: 6%;
        box-sizing: border-box;
        color: #fff;
        .fontSize(14);

        >div:first-of-type {
            margin-bottom: 3%;
        }
        z-index: 999;
        position: relative;

        .div_item {
            display: flex;
            margin-top: 12%;
            color: #8EA4E9;
            .fontSize(14);

            span {
                color: #fff;
                .fontSize(20);
            }
        }
    }

    .el-image {
        position: absolute;
        right: 2%;
        bottom: 0.9%;
    }
}</style>